<template>
  <div class="container">
    <el-dialog :title="`${data.id?'修改':'新增'}目录`" :visible="showDialog" style="width:100%" @close="close">
      <el-form ref="form" :model="formData" :rules="rules">
        <el-form-item v-if="!$route.query.id" label="所属学科" prop="subjectId" label-width="80px">
          <el-select v-model="formData.subjectID" style="width: 100%">
            <el-option
              v-for="item in subjectOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName" label-width="80px">
          <el-input v-model="formData.directoryName" placeholder="请输入目录名称" style="width: 100%" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="confirm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import { add, update } from '@/api/hmmm/directorys'
export default {
  props: {
    data: {
      type: Object,
      required: true
    },
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        id: '',
        subjectID: '',
        directoryName: ''
      },
      rules: {
        subjectID: [
          { type: 'number', message: '请选择所属学科', tirgger: 'blur' }
        ],
        directoryName: [
          { required: true, message: '请输入目录名称', tirgger: 'blur' }
        ]
      },
      subjectOption: []
    }
  },
  created() {
    this.getSimple()
    // console.log(this.data)
  },
  methods: {
    async getSimple() {
      const { data } = await simple(this.data)
      // console.log(data)
      this.subjectOption = data
    },
    close() {
      this.$emit('update:showDialog', false)
      this.$refs.form.resetFields()
    },
    async confirm() {
      // this.showDialog = true
      this.$refs.form.validate(async valid => {
        if (valid) {
          // 提交
          if (!this.data.id) {
            // 新增
            await add(this.formData)
          } else {
            // 修改
            this.formData.id = this.data.id
            await update(this.formData)
          }
          this.$message.success('操作成功')
          this.$emit('updateList')
          this.close()
        }
      })
    }
  }
}
</script>

<style scoped lang='scss'></style>
